/*
-------------------------------------------------------------------------------------------------
Theme Name:   Professional vCard
Theme URI:    http://labs.markdijkstra.eu/professional-vcard/index.html
Description:  vCard template.
Version:      Version 2
Style:        Light / left navigation
Author:       Mark Dijkstra
Author URI:   http://www.markdijkstra.eu
Updated:      --/--/----
Copyright:    (c) 2010 Mark Dijkstra
-------------------------------------------------------------------------------------------------

All rights reserved.

*/

@import url("tipsy.css");/* tooltip */
@import url("prettyPhoto.css");/* lightbox */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

html{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#6b6b6b;
	line-height:20px;
	background:#e7e7e7;
}
body{
}
input, 
textarea{
	outline:none;/* preventing the chrome and safari nasty yellow border */
	border:1px solid #ccc;
	background:#FFF;
}
a:focus{
	outline:none;
}
a, 
a:visited, 
a:active{
	color:#6b6b6b;
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
}
/* this will be added by javascript
.corners{
	 -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
}
.corners-r{
	 -moz-border-radius-topright: 5px;
	 -moz-border-radius-bottomright: 5px;
     -webkit-border-top-right-radius: 5px;
	 -webkit-border-bottom-right-radius: 5px;
}
*/
div#tweets{
	width:400px;
	float:left;
	background:#fff;
	border:1px solid #eee;
	margin:36px 0 0 30px;
	font-size:11px;
	padding:4px 8px 4px 8px;
}
div#tweets img{
	float:left;
	margin-top:4px;
	width:32px;
	height:32px;
}
div#tweets ul{
	width:360px;
	float:right;
}
div#tweets a{
	font-weight:bold;
}

/*
------------------------------------------------------------------------
WRAPPER - Content wrap CSS style.
------------------------------------------------------------------------
*/

div#wrapper{
	width:620px;
	margin:110px auto;
	position:relative;
}

/*
------------------------------------------------------------------------
Card - Card content wrap CSS style.
------------------------------------------------------------------------
*/

div#card{
	width:560px;	
	float:left;
	background:#fff;
	border-left:1px solid #cccccc;
	border-right:1px solid #cccccc;
	position:relative;
	margin-left:29px;
	padding-bottom:5px;
	overflow:hidden;
	z-index:2;
}
div#card-in{
	width:518px;
	float:left;
	background:#f8f8f8;
	border:1px solid #e8e8e8;
	margin:5px 10px 0px 10px;
	padding: 0px 10px;
}
ul#menu{
	width:20px;
	list-style-type:none;
	border-top:1px solid #e8e8e8;
	border-right:1px solid #e8e8e8;
	border-bottom:1px solid #e8e8e8;
	position:absolute;
	left:10px;
	top:52px;
	background:#fff;
	padding:10px 8px 0 1px;
}
ul#menu li{
	list-style-type:none;
	width:18px;
	height:18px;
	padding-bottom:5px;
	margin-bottom:4px;
}
ul#menu li.hr{
	list-style-type:none;
	border-bottom:1px solid #e8e8e8;
}
ul#menu li a img{
	width:19px;
	height:19px;
	border:none;
	background:#fff!important;/* IE fade to bug */
}
ul#menu li a{
	float:left;
	width:19px;
	height:19px;
}
div#content{
	width:518px;
	float:left;	
}
div.tip-logo{
	width:196px;
	height:54px;
	float:left;
	margin:84px 0 0 140px;
	overflow:hidden;
	position:relative;
}
div.tip-logo a,
div.tip-logo a:visited,
div.tip-logo a:active{
	width:196px;
	height:54px;
	float:left;
}
div.tip-logo img#logo-bg{
	position:absolute;
	top:-300px;
	left:0px;
	border:none;
}
div.tip-logo img#logo-frame{
	position:absolute;
	top:0px;
	left:0px;
	border:none;
	z-index:1;
	overflow:hidden;
}

/* boxes/pages */

div.box{
	width:498px;
	float:left;
	margin:10px;
	position:relative;
	background:#f8f8f8;
}
div.box2{
	width:498px;
	height:120px;
	float:left;
	margin:60px 0px 0px 40px;
	position:relative;
	
}
div.box3{
	width:478px;
	height:222px;
	float:left;
	margin:10px 0px 0px 40px;
	position:relative;
	}
div.box4{
	height:222px;
	float:left;
	margin:0px 0px 0px 0px;
	position:relative;
	}
div.box5{
	height:222px;
	float:left;
	margin:10px 0px 0px 10px;
	position:relative;
	}
div.box h2{
	width:100%;
	float:left;
	font-size:18px;
	font-weight:bold;
	color:#6b6b6b;
	font-family:verdana;
	margin-bottom:13px;
}
div.box .avatar{
	width:60px;
	height:60px;
	margin:3px 10px 10px 0;
	float:left;
	padding:3px;
	border:1px solid #eee;
	background:#FFF;
}
div.box p{
	width:400px;
	float:left;
	text-align:justify;
}
div.box ul{
	width:100%;
	list-style-type:none;
}
div.box ul li{
	float:left;
	width:249px;
	overflow:hidden;
}

/* about */

div#aboutinfo{
	position:absolute;
	bottom:2px;
	left:74px;
	width:400px;
}
div#aboutinfo a,
div#aboutinfo a:active,
div#aboutinfo a:visited{
	font-weight:bold;
	text-decoration:underline;
	margin:0 4px 0 4px;
}
div#aboutinfo a:hover{
	font-weight:bold;
	text-decoration:none;
}

/* work */

div.box .project{
	width:120px;
	height:140px;
	margin:3px 10px 10px 0;
	float:left;
	border:none;
}
div#slider-in{
	width:488px;
	height:154px;
	float:left;
}
div.w-box{
	width:488px;
	height:154px;
	float:left;
}
div.w-box h2{
	width:344px;
	float:left;
	margin:0 0px 5px 0;
	padding-right:14px;
}
div.w-box p{
	width:344px;
	float:left;
	margin:0 0px 10px 0;
	padding-right:14px;
}
div#work-nav{
	width:50px;
	height:23px;
	float:left;
	background:url(../images/nav-bg.png) no-repeat;
	margin:12px 0 0 211px;
	padding:2px 3px 0 3px;
}
div#work-nav a#prev{
	width:20px;
	height:20px;
	float:left;
	background:url(../images/prev-btn.png) no-repeat;
}
div#work-nav a#prev:hover{
	background:url(../images/prev-btn-hover.png) no-repeat;
}
div#work-nav a#next{
	width:20px;
	height:20px;
	float:right;
	background:url(../images/next-btn.png) no-repeat;
}
div#work-nav a#next:hover{
	background:url(../images/next-btn-hover.png) no-repeat;
}

/* Social */
div#center{
	margin-top:20px;
}
a.social-box-left{
	width:236px;
	height:50px;
	float:left;
	margin:3px 5px 5px 0;
	color:#666;
	border:1px solid #e5e5e5;
	background:#fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
a.social-box-center{
	width:470px;
	height:60px;
	float:left;
	margin:3px 20px 5px 0;
	color:#666;
	border:1px solid #e5e5e5;
	background:#fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

a.social-box-right{
	width:236px;
	height:50px;
	float:left;
	margin:3px 0 5px 0;
	color:#666;
	border:1px solid #e5e5e5;
	background:#fff;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
a.social-box-left img,
a.social-box-right img{
	width:32px;
	height:32px;
	float:left;
	margin:8px 10px 0px 8px;
	border:none;
}
a.social-box-center img{
	width:32px;
	height:32px;
	float:left;
	margin:16px 10px 0px 4px;
	border:none;
}
a.social-box-left strong,
a.social-box-right strong{
	width:170px;
	height:17px;
	float:left;
	margin:5px 0 0px 0;
	color:#333;
	font-size:14px;
	font-weight:bold;
}
a.social-box-center strong{
	width:320px;
	height:17px;
	float:center;
	margin:5px 0 0px 0;
	color:#333;
	font-size:20px;
	font-weight:bold;
}
a.social-box-left:hover,
a.social-box-center:hover,
a.social-box-right:hover{
	text-decoration:none;
	background:#eee;
	border:1px solid #e5e5e5;
	cursor:pointer;
}

/* Contact */

div#form-left{
	width:230px;
	height:180px;
	float:left;
	margin-top:3px;
}
div#form-left input{
	width:224px;
	height:20px;
	float:left;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	padding:2px 0 0 4px;
	margin-bottom:6px;
	background:#FFF;
}
div#form-left label{
	width:160px;
	height:22px;
	float:left;
	text-align:right;
	font-weight:bold;
	margin-right:14px;
	padding-top:2px;
}
div#form-left input#captcha{
	width:50px;
	height:20px;
	float:left;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	padding:2px 0 0 4px;
	margin-bottom:6px;
	background:#FFF;
}
div#form-right{
	width:230px;
	height:180px;
	float:left;
	margin-left:18px;
	margin-top:3px;
}
div#form-right textarea{
	width:224px;
	height:140px;
	float:left;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	padding:2px 0 0 4px;
	margin:0 0 6px 0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}
div#form-right input#submit{
	width:60px;
	height:24px;
	float:right;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	padding:0px 0 2px 0px;
	cursor:pointer;
	color:#666;
}
div#form-right input#submit:hover{
	color:#333;
	border:1px solid #999;
}

/* copyright */

div#copyright{
	width:200px;
	height:21px;
	background:#FFF;
	border:1px solid #ccc;
	position:absolute;
	right:30px;
	top:220px;
	padding:2px 0px 0 0;
	font-size:11px;
}
div#copyright p{
	width:170px;
	float:left;
	margin-left:10px;
}
div#copyright img{
	width:10px;
	height:10px;
	margin:5px 3px 0 5px;
	float:right;
	cursor:pointer;
}

/* background, top and bottom card */

div#top{
	width:562px;
	height:6px;
	background:url(../images/card-top.jpg) no-repeat;
	margin:0 0 0 29px;
	float:left;
}
div#bottom{
	width:620px;
	height:90px;
	background:url(../images/card-bottom.jpg) no-repeat;
	float:left;
}

/*
------------------------------------------------------------------------
LIVE VALIDATION - Live Validation CSS style.
------------------------------------------------------------------------
*/

.LV_validation_message{
    font-weight:bold;
	float:right;
	padding-right:130px;
}
.LV_valid {
    color:#00CC00;
}
span.LV_invalid {
   display:none;
} 
.LV_valid_field,
input.LV_valid_field:hover, 
input.LV_valid_field:active,
textarea.LV_valid_field:hover, 
textarea.LV_valid_field:active {
}  
.LV_invalid_field, 
input.LV_invalid_field:hover, 
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover, 
textarea.LV_invalid_field:active,
select.LV_invalid_field:active,
select.LV_invalid_field:hover  {
     border:1px solid #ff8b8b;
}

div#dtbottom {position: fixed; margin-left:-475px;
left:50%; bottom: 0px; background: url('../images/bottom.png') no-repeat; height: 50px; width: 910px; padding:15px 20px; }
